import React, { PureComponent } from 'react'
import { Radio, Card,Button } from 'antd'
import { checkPaper, getExamListScore } from '@/services/studentExam'
import styles from './index.less'
import { fileurl } from '@/services/baseurl'
import { isLianxi } from '@/utils/utils'
export default class CheckPaper extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            data: [],
            info: {},
            grade: 0,
            single: [],
            batch: [],
            judge: [],
            filter: '1',
            singleScore: 0,
            batchScore: 0,
            judgeScore: 0,
        }
    }
    changeFilter = (e: any) => {
        this.setState({
            filter: e.target.value
        })
    }
    componentDidMount() {
        window.history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            window.history.pushState(null, null, document.URL);
        });
        document.body.style.background = '#f0f0f0';
        const uid = localStorage.getItem('id') || '';
        const pid = this.props.match.params.id;
        checkPaper({ uid, pid }).then(res => {
            let single = [];
            let batch = [];
            let judge = [];
            let singleScore = 0;
            let batchScore = 0;
            let judgeScore = 0;

            for (const key in res) {
                const item = res[key];
                if (key !== 'test') {
                    if (item.type === 1) {
                        single.push(item)
                        if (String(item.answer).trim() === item.answer_user) {
                            singleScore++
                        }
                    }
                    if (item.type === 2) {
                        batch.push(item)
                        if (String(item.answer).trim() === item.answer_user) {
                            batchScore++
                        }
                    }
                    if (item.type === 3) {
                        judge.push(item)
                        if (String(item.answer).trim() === item.answer_user) {
                            judgeScore++
                        }
                    }
                    this.setState({
                        singleScore,
                        batchScore,
                        judgeScore
                    })
                }
            }
            this.setState({
                info: res.test || {},
                single,
                batch,
                judge
            })
        })
        getExamListScore({ id: pid, uid }).then(res => {
            this.setState({
                grade: res[0].score
            })
        })
    }

    render() {
        const { info, grade, single, batch, judge, filter, singleScore, batchScore, judgeScore } = this.state;
        const renderList = (data: any, type: number) => {
            return data.map((item: any, index: number) => {
                const answer_user = item.answer_user.toUpperCase();
                if (filter === '1') {
                    return <li key={item.id} className={styles['list-item']}>
                        <p className={styles['list-item-title']}>{index + 1}.{item.content}</p>
                        {
                            item.img && <img src={fileurl(item.is_jc) + item.img} onClick={() => window.open(fileurl(item.is_jc) + item.img)} style={{ width: 400, cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                        }
                        {
                            type === 1 ? <div className={styles['list-item-content']}>
                                {item.a && <p>A.{item.a}</p>}
                                {item.b && <p>B.{item.b}</p>}
                                {item.c && <p>C.{item.c}</p>}
                                {item.d && <p>D.{item.d}</p>}
                                {item.e && <p>E.{item.e}</p>}
                                {item.f && <p>F.{item.f}</p>}
                            </div> : <div className={styles['list-item-content']}>
                                    <p>A.正确</p>
                                    <p>B.错误</p>
                                </div>
                        }
                        <div className={styles['list-item-extra']}>
                            <p style={{ color: answer_user === String(item.answer).trim() ? 'green' : 'red' }}>考生答案：{answer_user || '未答'}</p>
                            <p>正确答案：{String(item.answer).trim()}</p>
                            {item.answer_that&& <p>答案解析：{item.answer_that}</p>}
                        </div>
                    </li>
                }
                if (filter === '2') {
                    return item.answer_user === String(item.answer).trim() && <li key={item.id} className={styles['list-item']}>
                        <p className={styles['list-item-title']}>{index + 1}.{item.content}</p>
                        {
                            item.img && <img src={fileurl(item.is_jc) + item.img} onClick={() => window.open(fileurl(item.is_jc) + item.img)} style={{ width: 400, cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                        }
                        {
                            type === 1 ? <div className={styles['list-item-content']}>
                                {item.a && <p>A.{item.a}</p>}
                                {item.b && <p>B.{item.b}</p>}
                                {item.c && <p>C.{item.c}</p>}
                                {item.d && <p>D.{item.d}</p>}
                                {item.e && <p>E.{item.e}</p>}
                                {item.f && <p>F.{item.f}</p>}
                            </div> : <div className={styles['list-item-content']}>
                                    <p>A.正确</p>
                                    <p>B.错误</p>
                                </div>
                        }
                        <div className={styles['list-item-extra']}>
                            <p style={{ color: answer_user === String(item.answer).trim() ? 'green' : 'red' }}>考生答案：{answer_user || '未答'}</p>
                            <p>正确答案：{String(item.answer).trim()}</p>
                            {item.answer_that&& <p>答案解析：{item.answer_that}</p>}
                        </div>
                    </li>
                }
                if (filter === '3') {
                    return item.answer_user !== String(item.answer).trim() && <li key={item.id} className={styles['list-item']}>
                        <p className={styles['list-item-title']}>{index + 1}.{item.content}</p>
                        {
                            item.img && <img src={fileurl(item.is_jc) + item.img} onClick={() => window.open(fileurl(item.is_jc) + item.img)} style={{ width: 400, cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                        }
                        {
                            type === 1 ? <div className={styles['list-item-content']}>
                                {item.a && <p>A.{item.a}</p>}
                                {item.b && <p>B.{item.b}</p>}
                                {item.c && <p>C.{item.c}</p>}
                                {item.d && <p>D.{item.d}</p>}
                                {item.e && <p>E.{item.e}</p>}
                                {item.f && <p>F.{item.f}</p>}
                            </div> : <div className={styles['list-item-content']}>
                                    <p>A.正确</p>
                                    <p>B.错误</p>
                                </div>
                        }
                        <div className={styles['list-item-extra']}>
                            <p style={{ color: answer_user === String(item.answer).trim() ? 'green' : 'red' }}>考生答案：{answer_user || '未答'}</p>
                            <p>正确答案：{String(item.answer).trim()}</p>
                            {item.answer_that&& <p>答案解析：{item.answer_that}</p>}
                           
                        </div>
                    </li>
                }

            })
        }
        return (
            <Card style={{ margin: 25 }}>
                <Radio.Group defaultValue="1" onChange={this.changeFilter}>
                    <Radio.Button value="1" style={{ color: filter === '1' ? "#FFF" : '', background: filter === '1' ? "#1890ff" : '' }}>显示所有</Radio.Button>
                    <Radio.Button value="2" style={{ color: filter === '2' ? "#FFF" : '', background: filter === '2' ? "green" : '' }}>显示答对</Radio.Button>
                    <Radio.Button value="3" style={{ color: filter === '3' ? "#FFF" : '', background: filter === '3' ? "#ff4d4f" : '' }}>显示答错</Radio.Button>
                </Radio.Group>
                <Button type="primary" danger onClick={()=>this.props.history.push(localStorage.getItem('exam_page'))}>退出</Button>
                <h3>考试名称:{info.name}</h3>

                <table border="1px" style={{ textAlign: 'center', margin: 'auto', fontSize: '16px' }}>
                    <thead>
                        <tr>
                            <th>试卷总分</th>
                            <th>总得分</th>
                            <th>单选题</th>
                            {
                                !isLianxi()&&<th>多选题</th>
                            }
                            
                            <th>判断题</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{info.total}</td>
                            <td style={{ color: "red" }}>{grade}</td>
                            <td>{singleScore * info.multiple_score}</td>
                            {
                                !isLianxi()&&<td>{batchScore * info.choices_score}</td>
                            }
                            <td>{judgeScore * info.judge_score}</td>
                        </tr>
                    </tbody>
                </table>
                <h4 style={{ fontSize: 18 }}>一、单选题    (共<b>{single.length}</b>题,每题<b>{info.multiple_score}</b>分,说明:选择一项正确的答案)</h4>
                <ul className={styles['list']}>
                    {renderList(single, 1)}
                </ul>
                <h4 style={{ fontSize: 18 }}> 二、判断   (共<b>{judge.length}</b>题,每题<b>{info.judge_score}</b>分,说明:选择一项正确的答案)</h4>
                <ul className={styles['list']}>
                    {renderList(judge, 2)}
                </ul>
                {
                    !isLianxi() && <React.Fragment>
                        <h4 style={{ fontSize: 18 }}> 三、多选题    (共<b>{batch.length}</b>题,每题<b>{info.choices_score}</b>分,说明:选择一项正确的答案)</h4>
                        <ul className={styles['list']}>
                            {renderList(batch, 1)}
                        </ul>
                    </React.Fragment>
                }
            </Card>
        )
    }
}
